<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl-NL" lang="nl-NL">
   <head>
      <title>Snitter</title>
      
      <link rel="stylesheet" type="text/css" media="all" href="css/screen.css"/>
      <link rel="stylesheet" type="text/css" media="all" href="lib/sexyalertbox/sexyalertbox.css"/>
      
      <script type="text/javascript" src="lib/jquery/jquery-1.3.2.min.js"></script>
      <script type="text/javascript" src="js/snitter.js"></script>
      <script type="text/javascript" src="lib/sexyalertbox/jquery.easing.1.3.js"></script>
      <script type="text/javascript" src="lib/sexyalertbox/sexyalertbox.v1.2.jquery.js"></script>
   </head>
   <body>
   
      <div class="container">
         <div class="account">
            <form id="logoutForm" style="display:none">
               <p><button type="submit">Logout</button></p>
            </form>
            
            <form id="showLogin" style="display:none">
               <p>You are not logged in, <button type="submit">login or register</button></p>
            </form>
            
            <p id="account"></p>
         </div>
      
         <h1><a href="/">Snitter</a></h1>
      
         <div class="sidebar">
            <div id="profile" style="display:none"></div>
            
            <div id="accountFollowing" style="display: none">
               <h2>Following</h2>
               <ul id="profile-following"></ul>
               <h2>My followers</h2>
               <ul id="profile-followers"></ul>
            </div>

            <div id="userFollowing" style="display: none">
               <h2>Following</h2>
               <ul id="user-following"></ul>
               <h2>Followers</h2>
               <ul id="user-followers"></ul>
            </div>
         </div>
            
	      <div class="content">
            <h2 id="pageTitle">What are you snittering?</h2>
      
		      <form id="createMessageForm" style="display:none">
		         <fieldset>
		            <textarea id="createMessageForm-text"></textarea>
		            <button type="submit">Update</button>
		         </fieldset>
		      </form>
	
	         <ul id="messages"></ul>
	      </div>
	      
	      <div id="loginOver" style="display: none">
	         
	         <form id="loginOverClose"><p><button type="submit">Cancel login/register</button></p></form>
	         
	         <h2>Hi there, please register or login</h2>
	      
		      <form id="loginForm">
		         <h3>Login</h3>
		         <fieldset>
		            <dl>
		               <dt><label>E-mail</label></dt>
		               <dd><input id="loginForm-email" value="" /></dd>
		
		               <dt><label>Password</label></dt>
		               <dd><input id="loginForm-password" value="" type="password" /></dd>
		               
		               <dt></dt>
		               <dd><button type="submit">Login</button></dd>
		            </dl>
		            
		         </fieldset>
		      </form>
		
		      <form id="registerForm">
		         <h3>Register</h3>
		         <fieldset>
		            <dl>
		               <dt><label>Username</label></dt>
		               <dd><input id="registerForm-username" /></dd>
		
		               <dt><label>Password</label></dt>
		               <dd><input id="registerForm-password" type="password" /></dd>
		
		               <dt><label>Screen Name</label></dt>
		               <dd><input id="registerForm-screenName" /></dd>
		
		               <dt><label>Address</label></dt>
		               <dd><input id="registerForm-address" /></dd>
		
		               <dt><label>Zip Code</label></dt>
		               <dd><input id="registerForm-zipCode" /></dd>
		
		               <dt><label>E-mail</label></dt>
		               <dd><input id="registerForm-email" /></dd>
		
		               <dt></dt>
		               <dd><button type="submit">Register</button></dd>
		            </dl>
		            
		         </fieldset>
		      </form>
	      </div>
	   </div>
   </body>
</html>
